import React, { Component } from 'react'

// 7. 导入 store
// import store from './store/index'

// connect 用来连接视图组件和状态组件
import { connect } from 'react-redux'

class Page1 extends Component {
    render() {

        // 如果使用了状态模块，获取数据的时候需要先 点模块名
        // const count = store.getState().app.count

        return (
            <div>
                <h1>Page1 - {this.props.count} </h1>

                <button onClick={this.props.add}>加 1</button>

                <button onClick={() => { this.props.addNum(5) }}>加指定数</button>
            </div>
        )
    }
}

// 将全局状态中的数据映射到组件的 props 属性中
const mapStateToProps = (state) => {

    // return 出去的内容就是映射到组件中的内容
    return {
        count: state.app.count
    }
}

// 将全局的修改方法映射到组件的 props 中
const mapDispatchToProps = (dispatch) => {
    return {
        add() {
            dispatch({
                type: 'add'
            })
        },
        addNum(value) {
            dispatch({
                type: 'addNum',
                payload: value
            })
        }
    }
}

// connect 是用来连接 视图组件和状态组件用的
// connect(映射状态到组件props中, 映射修改函数到组件 props 中)
// connect 有一个返回值，返回值是一个高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(Page1)